<template>
    <!-- 修改群聊信息的表单弹框 -->
    <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" width="400px"
        :showCancel="false" @close="dialogConfig.show = false">
        <!-- 子组件会emit "editBack" 提示我们修改成功了，回调这里的editBack函数重新加载信息 -->
        <GroupForm ref="groupFormRef" @editBack="editBack"></GroupForm>
    </Dialog>
</template>

<script setup>
import GroupForm from "./GroupForm.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = ref({
    show: false,
    title: "修改群聊",
});

/* 外部调用show的时候展示弹框，再调用子组件的show填充原来的群聊信息 */
const groupFormRef = ref()
const show = (data) => {
    dialogConfig.value.show = true
    nextTick(() => {
        groupFormRef.value.show(data)
    })
}

defineExpose({
    show
})

/* editBack关闭弹框，把emit的信息再次传给父组件，让父组件修改显示的群聊信息 */
const emit = defineEmits(['reloadGroupInfo'])
const editBack = () => {
    dialogConfig.value.show = false
    emit('reloadGroupInfo')
}
</script>

<style lang="scss" scoped></style>
